<template>
  <div>
    <el-tree :data="list" :props="{label:'name'}"
    show-checkbox
    default-expand-all
     :check-strictly="true"
     node-key="id"
     ref="tree"
     ></el-tree>
     <div style="margin-top: 20px; text-align: right">
    <el-button type="primary" @click="hConfirm">确定</el-button>
      <el-button @click="hCancel">取消</el-button>
     </div>
  </div>
</template>

<script>
import { getPermissionList } from "@/api/permissions";
import { treeForm } from "@/utils";
import { getRoleDetail,assignPerm } from "@/api/settings";
export default {
    props:{
        id:{
            type:String,
            required:true
        }
    },
    data() {
        return {
            list:[],
            permIds:[]
        };
    },
    created(){
        this.loadPermissionList()
    },
    methods:{
        // 确认// 分配角色
       async hConfirm(){
            try {
               const permIds= this.$refs.tree.getCheckedKeys(permIds)
                const res = await assignPerm({id:this.id,permIds:permIds})
                console.log(res);
            } catch (error) {
                console.log(error);
            }
            
            this.$emit('close');
        },
      
        // 取消
        hCancel(){
            this.$emit('close');
        },
        // 获取权限加载
       async loadPermissionList(){
        try {
            const res = await getPermissionList()
            console.log(res);
            this.list = treeForm(res.data)
           const info = await getRoleDetail(this.id)
        //    console.log(this.$refs.tree.setCheckedKeys());
            this.$refs.tree.setCheckedKeys(info.data.permIds)
           console.log(info);
           this.permIds=info.data.permIds
        } catch (error) {
            console.log(error);
        }
        },
    }
}
</script>

<style>

</style>